<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background: #f0f0f0;
            }
            
            .h1 {
                height: 1px;
            }
            
            .h80 {
                height: 80px;
            }
            
            .h40 {
                height: 40px;
                line-height: 40px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .hightitem {
                background-color: #fff;
            }
            
            .sectionTitle {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                vertical-align: top;
                font-size: 12px;
                color: #999;
            }
            
            .row {
                display: -webkit-box;
                display: -webkit-flex;
            }
            
            .col {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
            
            .col img {
                position: absolute;
                right: 0;
                width: 80px;
                top: 0;
            }
            
            .col .matrix3 {
                display: table;
                height: inherit;
                width: 100%;
            }
            
            .matrix3 .matrixcell {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            
            .petty {
                height: 50%;
                width: 100%;
                float: left;
            }
            
            .brb {
                border-bottom: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
            }
            
            .bb {
                border-bottom: 1px solid #e0e0e0;
            }
            
            .br {
                border-right: 1px solid #e0e0e0;
            }
            
            .section02 .col img {
                position: relative;
            }
            
            .section02 .col .petty {
                text-align: center;
                font-size: 20px;
                padding-top: 10px;
            }
            
            .section02 .col .petty img {
                width: 40%;
                margin-top: 10px;
            }
            
            .section02 .logocover {
                text-align: center;
                margin-top: 20px;
            }
            
            .section02 .logocover img {
                width: 80%;
            }
            
            .section02 .title {
                font-size: 20px;
                margin-top: 10px;
            }
            
            .section02 .subtitle {
                font-size: 14px;
                margin-top: 5px;
                color: #666;
            }
            
            .section03 .matrixcell {
                text-align: left;
                margin-left: 10px;
            }
            
            .section03 .col img {
                position: absolute;
                right: 10px;
                top: 10px;
                left: inherit;
                width: 50px;
            }
            
            .section03 .col {
                height: 80px;
            }
            
            .section03 .col .title {
                margin-left: 10px;
                font-size: 18px;
            }
            
            .section03 .col .subtitle {
                font-size: 13px;
                color: #666;
                margin-left: 10px;
                margin-top: 10px;
            }
            
            .card-list {
                position: relative;
                height: auto;
            }
            
            .card {
                border: 1px solid #e0e0e0;
                margin: 0 5px;
            }
            
            .card .upimg {
                position: relative;
            }
            
            .card .upimg img {
                width: 100%;
                height: 150px;
            }
            
            .card .title,
            .card .subtitle {
                font-size: 14px;
                bottom: 25px;
                color: #fff;
                margin-left: 10px;
                margin-top: 10px;
            }
            
            .card .hot {
                position: absolute;
                bottom: 5px;
                margin-left: 10px;
            }
            
            .card .hot span {
                color: #fff;
            }
            
            .card .downinfo {
                padding: 10px;
                font-size: 14px;
                color: #666;
                line-height: 20px;
            }
            
            .card .info {
                background-color: rgba(0, 0, 0, 0.4);
                position: absolute;
                bottom: 0px;
                width: 100%;
                padding-bottom: 5px;
            }
            
            .viewed-eye .eye {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url(../image/eye.png) no-repeat;
                background-size: 11px auto;
                margin-bottom: -3px;
            }
            
            .card .img_wrap {
                position: absolute;
                right: 0;
                bottom: 10px;
            }
            
            .card .subtitle {
                font-size: 12px;
                margin-top: 5px;
            }
            
            .card .viewed-eye {
                background-color: #000;
                padding: 5px;
                border-radius: 20px;
                color: #fff;
                font-size: 14px;
            }
            
            .highlight {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <div class="h1"></div>
        <div class="row hightitem section02">
            <div class="col br open-win" win="search_result" param='{"keyword":"KTV"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">身边热闹</div>
                        <div class="subtitle">发现新玩法</div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/find/logo_01.png"></div>
            </div>
            <div class="col br open-win" win="search_result" param='{"keyword":"家居"}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">品牌优惠</div>
                        <div class="subtitle">热门快餐5折起</div>
                    </div>
                </div>
                <div class="logocover"><img src="../image/find/logo_02.png"></div>
            </div>
            <div class="col">
                <div class="petty bb open-win" win="search_result" param='{"keyword":"影视"}'>
                    看排行
                    <div class=""><img src="../image/find/logo_03.png">
                    </div>
                </div>
                <div class="petty open-win" win="search_result" param='{"keyword":"俱乐部"}'>
                    查商区
                    <div class=""><img src="../image/find/logo_04.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="sectionTitle">免费领取</div>
        <div class="row hightitem section03">
            <div class="col brb open-win" win="shoplist" param='{"type":1,"shopType":-1}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">最热0元抢</div>
                        <div class="subtitle">还不来就晚了</div>
                    </div>
                </div>
                <img src="../image/find/logo_05.png">
            </div>
            <div class="col bb open-win" win="shoplist" param='{"type":1,"shopType":-1}'>
                <div class="matrix3">
                    <div class="matrixcell">
                        <div class="title">天天霸王餐</div>
                        <div class="subtitle">白吃白喝白玩</div>
                    </div>
                </div>
                <img src="../image/find/logo_06.png" alt="">
            </div>
        </div>
        <div class="sectionTitle">趣味生活</div>
        <div id="list" class="card-list"></div>
    </body>
    <script id="template" type="text/template">
        {{~ it:data }}
        <div class="card hightitem open-win" win="shoplist" param='{"type":1,"shopType":-1}'>
            <div class="upimg">
                <img id="thumbnail_{{= data.id }}" src="../image/default1.jpg">
                <div class="info">
                    <div class="title">{{= data.title }}</div>
                    <div class="subtitle">{{= data.subtitle }}</div>
                    <div class="img_wrap">
                        <div class="viewed-eye"><i class="eye"></i>{{= data.eye }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h10"></div>
        {{~}}
    </script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/SHA1.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/remotedb.js"></script>
    <script type="text/javascript" src="../script/list.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnInitList('find');
            api.refreshHeaderLoading();
        };
    </script>

</html>
